<template>
	<div class='Page'>
		<div class='content'>
			<div class='inner' :style="{top:-top+'px',position:'relative'}">
				<div class='que'
					v-for="(item,index) in block_list"
					:style="{height:item.end - item.start + 'px', marginTop:item.start - item.last_end + 'px'}"
					v-if="item.end>=order*height && item.start<(order+1)*height"
					@mousedown = "mousedown(item.disdrag,index,$event)">
					<!--@drag = 'drag'
					@dragend = 'dragend'
					@dragstart = 'dragstart(item.disdrag,index,$event)'>-->
					第{{index+1}}题内容
					if (isHeader) {
						<item.component />
					}
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
	  name: 'Page',
	  components: {
	  },
	  data(){
	  	return{
	  		drag_index:null,
	  		last_Y:null,
	  		is_down:false,
	  		target:null,
	  		delta:null,
	  	}
	  },
	  computed:{
	  	top:function(){
	  		for (var i = 0; i < this.block_list.length; i++) {
	  			let item = this.block_list[i];
	  			if (item.end >= this.order*this.height) {
	  				return this.order*this.height-item.last_end;
	  			}
	  		}
	  	}
	  },
	  props:['block_list','order','height'],
	  mounted:function(){
	  	this.$parent.$el.addEventListener('mousemove',this.mousemove,false)
	  	this.$parent.$el.addEventListener('mouseup',this.mouseup,true)
	  },
	  methods:{
	  	mousedown:function(b,index,ev){
	  		ev.preventDefault()
	  		this.target = ev.target;
	  		if(b){
	  			this.target.classList.add('dismove')
	  			return
	  		}
	  		this.drag_index = index;
	  		this.last_Y = ev.screenY;
	  		this.is_down = true;

	  		this.target = ev.target;
	  		this.target.style.opacity = 0.3;
	  	},
	  	mousemove:function(ev){
	  		ev.preventDefault()
	  		if(!this.is_down) return;
	  		this.delta = Math.max(ev.screenY-this.last_Y,this.block_list[this.drag_index].last_end-this.block_list[this.drag_index]['start']);
			if (this.block_list[this.drag_index].new_page && this.delta>0) {
				this.target.classList.add('dismove');
				return;
			}
	  		this.target.style.top = this.delta+'px';
	  		
	  		
	  	},
	  	mouseup:function(ev){
	  		ev.preventDefault()
 			if (this.target) {
 				this.target.classList.remove('dismove')
 			}
	  		if(!this.is_down) return;
	  		this.target.style.top = 0+'px';
	  		this.target.style.opacity = 1;
	  		this.is_down = false;
	  		let delta = this.delta;
	  		this.delta = null;
	  		for (var i = this.drag_index; i < this.block_list.length; i++) {
	  			let item = this.block_list[i];
	  			if (i == this.drag_index&&delta>0&&item.new_page) {
	  				break
	  			}
	  			if (i > this.drag_index&&item.new_page&&(this.block_list[i-1]||{end:0})['end']<item.start) {
	  				break
	  			}
	  			item.start += delta;
	  			item.end += delta;
	  		};
	  		this.$parent.optimize_list()
	  	},
	  	
	  }
	}
</script>

<style lang="css">
	.Page{
		cursor: move;
		border: 1px solid red;
		width: 200px;
		margin: 0 auto;
		height: 600px;
		padding: 20px;
  }
  
  .content{
    height: 560px;
    border: 1px solid blue;
    overflow: hidden;
    box-sizing:border-box;
  }
  .inner{
    position: relative;
  }
  .que{
    width: 100%;
    background-color: yellow;
    border: 1px solid black;
    position: relative;
    box-sizing:border-box;
    -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      
  }
  .dismove{
    background-color: red;
  }
	
</style>